<template>
  <div class="edit">
    <el-dialog :visible.sync="dialogVisible" center class="countDialog" width="80%" :close-on-click-modal="false" @close="resetO('ruleForm')">
      <div slot="title" class="dialog-title">{{ pageTitle }}</div>
      <div>
        <el-form ref="ruleForm" :rules="rules" :model="form" size="mini" label-width="100px">
          <el-form-item prop="name" label="名称">
            <el-input v-model="form.name" placeholder="输入名称"></el-input>
          </el-form-item>
          <el-form-item prop="adx_items" label="ADX流量配置">
            <div>
              <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                <div>
                  ADX:
                  <el-select @change="getadxappall" size="mini" v-model="adx_ids" clearable multiple collapse-tags style="margin-left: 5px;" placeholder="请选择">
                    <el-option v-for="item in adx_all" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </div>
                <div>
                  媒体:
                  <el-select @change="getadxslotall" size="mini" v-model="adxapp_ids" clearable multiple collapse-tags style="margin-left: 5px;" placeholder="请选择">
                    <el-option v-for="item in adxapp_all" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </div>
                <div>
                  广告位:
                  <el-select @change="seladxslot" size="mini" v-model="adxslot_ids" clearable multiple collapse-tags style="margin-left: 5px;" placeholder="请选择">
                    <el-option v-for="item in adxslot_all" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </div>
              </div>
              <div  style="margin-top: 10px;">
                <el-table :data="adx_items" border height="300px" max-height="500px" size="mini" stripe style="width: 100%">
                  <el-table-column prop="a_name" label="ADX"></el-table-column>
                  <el-table-column prop="m_name" label="媒体"></el-table-column>
                  <el-table-column prop="s_name" label="广告位"></el-table-column>
                  <el-table-column prop="adv_id" label="广告位ID"></el-table-column>
                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button @click="deleteAdxRow(scope.row.sid)" type="text" size="small">移除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="ssp_items" label="SSP流量配置">
            <div>
              <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                <div>
                  SSP:
                  <el-select @change="getsspappall" size="mini" v-model="ssp_ids" clearable multiple collapse-tags style="margin-left: 5px;" placeholder="请选择">
                    <el-option v-for="item in ssp_all" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </div>
                <div>
                  应用:
                  <el-select @change="getsspslotall" size="mini" v-model="sspapp_ids" clearable multiple collapse-tags style="margin-left: 5px;" placeholder="请选择">
                    <el-option v-for="item in sspapp_all" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </div>
                <div>
                  广告位:
                  <el-select @change="selsspslot" size="mini" v-model="sspslot_ids" clearable multiple collapse-tags style="margin-left: 5px;" placeholder="请选择">
                    <el-option v-for="item in sspslot_all" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </div>
              </div>
              <div  style="margin-top: 10px;">
                <el-table :data="ssp_items" border height="300px" max-height="500px" size="mini" stripe style="width: 100%">
                  <el-table-column prop="a_name" label="ADX"></el-table-column>
                  <el-table-column prop="m_name" label="媒体"></el-table-column>
                  <el-table-column prop="s_name" label="广告位"></el-table-column>
                  <el-table-column prop="adv_id" label="广告位ID"></el-table-column>
                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button @click="deleteSspRow(scope.row.sid)" type="text" size="small">移除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="dsp_items" label="预算配置">
            <div>
              <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                <div>
                  预算:
                  <el-select @change="getdspslotall" size="mini" v-model="dsp_ids" clearable multiple collapse-tags style="margin-left: 5px;" placeholder="请选择">
                    <el-option v-for="item in dsp_all" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </div>
                <div>
                  广告位:
                  <el-select @change="seldspslot" size="mini" v-model="dspslot_ids" clearable multiple collapse-tags style="margin-left: 5px;" placeholder="请选择">
                    <el-option v-for="item in channel_slot_all" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </div>
              </div>
              <div style="margin-top: 10px;">
                <el-table :data="dsp_items" border height="300px" max-height="500px" size="mini" stripe style="width: 100%">
                  <el-table-column prop="a_name" label="预算"></el-table-column>
                  <el-table-column prop="s_name" label="广告位"></el-table-column>
                  <el-table-column prop="adv_id" label="广告位ID"></el-table-column>
                  <el-table-column prop="flag" label="优先">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.flag"></el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column prop="min_price_rate" label="底价上浮比例(%)">
                    <template slot-scope="scope">
                      <el-input size="small" type="number" min="0" max="100" v-model.number="scope.row.min_price_rate"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="rtb_price_rate" label="溢价比例(%)">
                    <template slot-scope="scope">
                      <el-input size="small" type="number" min="0" max="100" v-model.number="scope.row.rtb_price_rate"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="rtb_price" label="发送上游底价(分)">
                    <template slot-scope="scope">
                      <el-input size="small" type="number" min="0" max="20000" v-model.number="scope.row.rtb_price"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="media_price" label="媒体成交价(分)">
                    <template slot-scope="scope">
                      <el-input size="small" type="number" min="0" max="20000" v-model.number="scope.row.media_price"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button @click="deleteDspRow(scope.row.sid)" type="text" size="small">移除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-form-item>
<!--          <el-form-item prop="dealid" label="DEALID">-->
<!--            <el-input v-model="form.dealid" placeholder="输入DEALID"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item>
            <el-button size="small" type="primary" @click="onSubmit('ruleForm')">提交</el-button>
            <el-button size="small" @click="resetO('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {adxplan_add, adxplan_edit} from '@/api/adxplan'
import {GenRanSrt} from "@/utils/tools";
import {adxlist_all} from "@/api/adxlist";
import {adxapp_all} from "@/api/adxapp";
import {adxslot_all} from "@/api/adxslot";
import {ssplist_all} from "@/api/ssplist";
import {sspapp_all} from "@/api/sspapp";
import {sspslot_all} from "@/api/sspslot";
import {channel_all} from "@/api/channellist";
import {channel_slot_all} from "@/api/channelslot";
export default {
  name: 'adxplan-edit',
  data(){
    return {
      dialogVisible: false,
      pageTitle:'新增',
      form:{
        media_id:''
      },
      adx_all:[],
      adx_ids:[],
      adxapp_all:[],
      adxapp_ids:[],
      adxslot_all:[],
      adxslot_ids:[],
      adx_items:[],
      ssp_all:[],
      ssp_ids:[],
      sspapp_all:[],
      sspapp_ids:[],
      sspslot_all:[],
      sspslot_ids:[],
      ssp_items:[],
      dsp_all:[],
      dsp_ids:[],
      channel_slot_all:[],
      dspslot_ids:[],
      dsp_items:[],
      rules:{
        name:[
          {required: true, message: '请输入名称', trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
  },
  components: {

  },
  mounted(){
  },
  created() {
  },
  methods: {
    seladxslot(val){
      var tmp_res = this.adx_items
      for(var i=0;i<val.length;i++){
        var tmp = this.getIdObj(val[i],this.adxslot_all);
        if (!tmp || !tmp.id || tmp.id === '') {
          continue
        }
        var stmp = this.getSIdObj(val[i],this.adx_items)
        if (stmp && stmp.sid && stmp.sid !== '') {
          continue
        }
        tmp_res.push({
          ty:'2',
          aid:tmp.adx_id,
          a_name:tmp.adx_name,
          mid:tmp.mid,
          m_name:tmp.mid_name,
          sid:tmp.id,
          s_name:tmp.name,
          adv_id:tmp.slot_id,
        })
      }
      tmp_res.sort((a, b) => a.sid.localeCompare(b.sid))
      this.adx_items = tmp_res
    },
    selsspslot(val){
      var tmp_res = this.ssp_items
      for(var i=0;i<val.length;i++){
        var tmp = this.getIdObj(val[i],this.sspslot_all);
        if (!tmp || !tmp.id || tmp.id === '') {
          continue
        }
        var stmp = this.getSIdObj(val[i],this.ssp_items)
        if (stmp && stmp.sid && stmp.sid !== '') {
          continue
        }
        tmp_res.push({
          ty:'1',
          aid:tmp.adx_id,
          a_name:tmp.ssp_name,
          mid:tmp.mid,
          m_name:tmp.mid_name,
          sid:tmp.id,
          s_name:tmp.name,
          adv_id:tmp.slot_id,
        })
      }
      tmp_res.sort((a, b) => a.sid.localeCompare(b.sid))
      this.ssp_items = tmp_res
    },
    seldspslot(val){
      var tmp_res = this.dsp_items
      for(var i=0;i<val.length;i++){
        var tmp = this.getIdObj(val[i],this.channel_slot_all);
        if (!tmp || !tmp.id || tmp.id === '') {
          continue
        }
        var stmp = this.getSIdObj(val[i],this.dsp_items)
        if (stmp && stmp.sid && stmp.sid !== '') {
          continue
        }
        tmp_res.push({
          ty:'3',
          aid:tmp.dsp_id,
          a_name:tmp.dsp_name,
          mid:tmp.dsp_id,
          m_name:tmp.dsp_name,
          sid:tmp.id,
          s_name:tmp.name,
          adv_id:tmp.adv_id,
        })
      }
      tmp_res.sort((a, b) => a.sid.localeCompare(b.sid))
      this.dsp_items = tmp_res
    },
    deleteAdxRow(sid) {
      var tmp_arr = this.adx_items
      var tmp_res = []
      for(var i=0;i<tmp_arr.length;i++){
        var tmp = tmp_arr[i]
        if (tmp.sid == sid) {
          continue
        }
        tmp_res.push(tmp)
      }
      tmp_res.sort((a, b) => a.sid.localeCompare(b.sid))
      this.adx_items = tmp_res
    },
    deleteSspRow(sid) {
      var tmp_arr = this.ssp_items
      var tmp_res = []
      for(var i=0;i<tmp_arr.length;i++){
        var tmp = tmp_arr[i]
        if (tmp.sid == sid) {
          continue
        }
        tmp_res.push(tmp)
      }
      tmp_res.sort((a, b) => a.sid.localeCompare(b.sid))
      this.ssp_items = tmp_res
    },
    deleteDspRow(sid) {
      var tmp_arr = this.dsp_items
      var tmp_res = []
      for(var i=0;i<tmp_arr.length;i++){
        var tmp = tmp_arr[i]
        if (tmp.sid == sid) {
          continue
        }
        tmp_res.push(tmp)
      }
      tmp_res.sort((a, b) => a.sid.localeCompare(b.sid))
      this.dsp_items = tmp_res
    },
    getadxall(){
      adxlist_all({}).then(res => {
        var data = res.data
        console.log(data)
        this.adx_all = data
      }).catch(err => {
        console.log(err)
      })
    },
    getadxappall(val){
      if (!val || !val.length || val.length == 0) {
        this.$message({
          showClose: true,
          center:true,
          message: '请先选择ADX',
          type: 'error'
        })
        return
      }
      adxapp_all({adx_id:val.join(',')}).then(res => {
        var data = res.data
        console.log(data)
        this.adxapp_all = data
      }).catch(err => {
        console.log(err)
      })
    },
    getadxslotall(val){
      if (!val || !val.length || val.length == 0) {
        this.$message({
          showClose: true,
          center:true,
          message: '请先选择媒体',
          type: 'error'
        })
        return
      }
      adxslot_all({adx_id:val.join(',')}).then(res => {
        var data = res.data
        console.log(data)
        this.adxslot_all = data
      }).catch(err => {
        console.log(err)
      })
    },
    getsspall(){
      ssplist_all({}).then(res => {
        var data = res.data
        console.log(data)
        this.ssp_all = data
      }).catch(err => {
        console.log(err)
      });
    },
    getsspappall(val){
      if (!val || !val.length || val.length == 0) {
        this.$message({
          showClose: true,
          center:true,
          message: '请先选择SSP',
          type: 'error'
        })
        return
      }
      sspapp_all({adx_id:val.join(',')}).then(res => {
        var data = res.data
        console.log(data)
        this.sspapp_all = data
      }).catch(err => {
        console.log(err)
      })
    },
    getsspslotall(val){
      if (!val || !val.length || val.length == 0) {
        this.$message({
          showClose: true,
          center:true,
          message: '请先选择应用',
          type: 'error'
        })
        return
      }
      sspslot_all({adx_id:val.join(',')}).then(res => {
        var data = res.data
        console.log(data)
        this.sspslot_all = data
      }).catch(err => {
        console.log(err)
      })
    },
    getdspall(){
      channel_all({}).then(res => {
        var data = res.data
        console.log(data)
        this.dsp_all = data
      }).catch(err => {
        console.log(err)
      })
    },
    getdspslotall(val){
      if (!val || !val.length || val.length == 0) {
        this.$message({
          showClose: true,
          center:true,
          message: '请先选择预算',
          type: 'error'
        })
        return
      }
      channel_slot_all({adx_id:val.join(',')}).then(res => {
        var data = res.data
        console.log(data)
        this.channel_slot_all = data
      }).catch(err => {
        console.log(err)
      })
    },
    getIdObj(id,obj){
      for(let i=0;i<obj.length;i++){
        var tmp = obj[i]
        if (tmp.id === id) {
          return tmp
        }
      }
      return {}
    },
    getSIdObj(id,obj){
      for(let i=0;i<obj.length;i++){
        var tmp = obj[i]
        if (tmp.sid === id) {
          return tmp
        }
      }
      return {}
    },
    resetO(formName){
      this.dialogVisible = false
      this.form = {}
      this.$refs[formName].resetFields()
      this.adx_all = []
      this.adx_ids = []
      this.adxapp_all = []
      this.adxapp_ids = []
      this.adxslot_all = []
      this.adxslot_ids = []
      this.adx_items = []
      this.ssp_all = []
      this.ssp_ids = []
      this.sspapp_all = []
      this.sspapp_ids = []
      this.sspslot_all = []
      this.sspslot_ids = []
      this.ssp_items = []
      this.dsp_all = []
      this.dsp_ids = []
      this.channel_slot_all = []
      this.dspslot_ids = []
      this.dsp_items = []
    },
    onSubmit(formName){
      var sdata = this.form
      sdata.adx_items = this.adx_items
      sdata.ssp_items = this.ssp_items
      sdata.dsp_items = this.dsp_items
      sdata.flag = parseInt(sdata.flag)
      if (this.adx_items.length === 0 && this.ssp_items.length === 0){
        this.$message({
          showClose: true,
          center:true,
          message: '流量必须配置',
          type: 'error'
        })
        return false
      }
      if (this.dsp_items.length === 0 ){
        this.$message({
          showClose: true,
          center:true,
          message: '预算必须配置',
          type: 'error'
        })
        return false
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.SObj(sdata).then(res => {
            var data = res.data
            console.log(data)
            this.$message({
              showClose: true,
              center:true,
              message: '操作成功',
              type: 'success'
            })
            this.dialogVisible = false
            this.$parent.GetList()
          }).catch(err => {
            console.log(err)
          })
        }else {
          return false
        }
      })

    },
    SObj(sdata){
      if (sdata.id == undefined || sdata.id == ''){
        return adxplan_add(sdata)
      }else {
        return adxplan_edit(sdata)
      }
    },
    getmid(){
      return GenRanSrt(6)
    },
    showInfo(info){
      this.dialogVisible = true
      if (info.id != undefined) {
        this.pageTitle = '编辑'
        //adx
        if (info.adx_items && info.adx_items.length > 0 ){
          var tmp_res_adx = info.adx_items
          // this.adxInitSel(info.adx_items)
          tmp_res_adx.sort((a, b) => a.sid.localeCompare(b.sid))
          this.adx_items = tmp_res_adx
        }
        //ssp
        if (info.ssp_items && info.ssp_items.length > 0 ){
          var tmp_res_ssp = info.ssp_items
          // this.sspInitSel(info.ssp_items)
          tmp_res_ssp.sort((a, b) => a.sid.localeCompare(b.sid))
          this.ssp_items = tmp_res_ssp
        }
        //dsp
        if (info.dsp_items && info.dsp_items.length > 0 ){
          var tmp_res_dsp = info.dsp_items
          // this.dspInitSel(info.dsp_items)
          tmp_res_dsp.sort((a, b) => a.sid.localeCompare(b.sid))
          this.dsp_items = tmp_res_dsp
        }
      }
      var tmpinfo = info
      this.form = tmpinfo
      this.getadxall()
      this.getsspall()
      this.getdspall()
    },
    adxInitSel(obj){
      var tmp_adx_ids = []
      var tmp_adxapp_ids = []
      var tmp_adxslot_ids = []
      for (var i=0;i<obj.length;i++){
        tmp_adx_ids.push(obj[i].aid)
        tmp_adxapp_ids.push(obj[i].mid)
        tmp_adxslot_ids.push(obj[i].sid)
      }
      this.adx_ids = tmp_adx_ids.filter((item, index) => tmp_adx_ids.indexOf(item) === index)
      if (this.adx_ids.length > 0){
        this.getadxappall(this.adx_ids)
      }
      this.adxapp_ids = tmp_adxapp_ids.filter((item, index) => tmp_adxapp_ids.indexOf(item) === index)
      if (this.adxapp_ids.length > 0) {
        this.getadxslotall(this.adxapp_ids)
      }
        this.adxslot_ids = tmp_adxslot_ids.filter((item, index) => tmp_adxslot_ids.indexOf(item) === index)
    },
    sspInitSel(obj){
      var tmp_adx_ids = []
      var tmp_adxapp_ids = []
      var tmp_adxslot_ids = []
      for (var i=0;i<obj.length;i++){
        tmp_adx_ids.push(obj[i].aid)
        tmp_adxapp_ids.push(obj[i].mid)
        tmp_adxslot_ids.push(obj[i].sid)
      }
      this.ssp_ids = tmp_adx_ids.filter((item, index) => tmp_adx_ids.indexOf(item) === index)
      if (this.ssp_ids.length > 0) {
        this.getsspappall(this.ssp_ids)
      }
      this.sspapp_all = tmp_adxapp_ids.filter((item, index) => tmp_adxapp_ids.indexOf(item) === index)
      if (this.sspapp_all.length > 0) {
        this.getsspslotall(this.sspapp_all)
      }
      this.adxslot_ids = tmp_adxslot_ids.filter((item, index) => tmp_adxslot_ids.indexOf(item) === index)
    },
    dspInitSel(obj){
      var tmp_adx_ids = []
      var tmp_adxslot_ids = []
      for (var i=0;i<obj.length;i++){
        tmp_adx_ids.push(obj[i].aid)
        tmp_adxslot_ids.push(obj[i].sid)
      }
      this.dsp_ids = tmp_adx_ids.filter((item, index) => tmp_adx_ids.indexOf(item) === index)
      if (this.dsp_ids.length > 0) {
        this.getdspslotall(this.dsp_ids)
      }
      this.dspslot_ids = tmp_adxslot_ids.filter((item, index) => tmp_adxslot_ids.indexOf(item) === index)
    },
  }
}
</script>
<style lang="scss" scoped>
.edit {

}
</style>